<template>
  <view class="service">
    <view class="title">
      <view class="name">我的服务</view>
    </view>
    <view class="list">
      <view class="item" v-for="(item, index) in list" :key="index" @click="goService(item)">
        <view class="image">
          <v-image :url="'/mini/service/' + item.image + '.png'" :width="'70rpx'" :height="'70rpx'" />
        </view>
        <view class="text">{{ item.text }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { qrcode } from '../../../../util/platform'
import Image from '../../../../components/image/index'
import { clearAll } from '../../../../util/cache'

export default {
  components: {
    'v-image': Image
  },
  data() {
    return {
      list: [
        { image: 'qrcode', text: '推荐码', url: 'qrcode' },
        // { image: 'team', text: '我的团队', url: 'team' },
        // { image: 'commission', text: '我的佣金', url: 'commission' },
        // { image: 'cash', text: '提现管理', url: 'cash' },
        { image: 'password', text: '支付密码', url: 'pay-password' },
        // { image: 'bank', text: '银行卡', url: 'bank' },
        { image: 'address', text: '收货地址', url: 'address' },
        // { image: 'learn', text: '商学院', url: 'learn' },
        { image: 'fav', text: '商品收藏', url: 'fav' },
        // { image: 'message', text: '消息公告', url: 'news' },
        // { image: 'fav', text: '商品收藏', url: 'fav' },
        { image: 'message', text: '消息公告', url: 'news' },
        { image: 'comment', text: '我的评论', url: 'comment' },
        { image: 'about', text: '关于我们', url: 'about' },
        { image: 'service', text: '联系客服', url: 'contact' },
        { image: 'clear', text: '清除缓存', url: 'cache' },
        { image: 'logout', text: '退出登录', url: 'logout' }
      ]
    }
  },
  methods: {
    goService(item) {
      const url = item.url
      if (url === 'cache') {
        clearAll()
        uni.showToast({
          icon: 'none',
          title: '操作成功'
        })
      } else if (url === 'logout') {
        uni.showModal({
          title: '您确定要退出登录吗?',
          success: res => {
            if (res.confirm) {
              this.$store.dispatch('User/logout').then(() => {
                uni.showModal({
                  title: '退出成功',
                  showCancel: false,
                  success: res => {
                    if (res.confirm) {
                      this.$store.dispatch('Url/set_url', '/pages/index/index?type=0')
                    }
                  }
                })
              })
            }
          }
        })
      } else if  (url === 'qrcode') {
        qrcode()
      } else {
        uni.navigateTo({
          url: `/sub_service/${url}/index`
        })
      }
    },
  }
}
</script>

<style scoped lang="scss">
.service {
  //font-size: 24rpx;
  margin: 20rpx;
  background: white;
  border-radius: 10rpx;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
    border-bottom: 1rpx solid #efefef;
    padding: 0 20rpx;
    .name {
      font-weight: 700;
      font-size: 28rpx;
    }
    .more {
      color: #8e8f91;
      display: flex;
    }
  }
  .list {
    display: flex;
    justify-content: start;
    padding: 30rpx 0;
    flex-wrap: wrap;
    .item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 20rpx;
      //background: red;
      .text {
        font-size: 24rpx;
      }
    }
    .image {
      height: 70rpx;
      width: 70rpx;
      padding: 10rpx;
      //background: red;
      //image {
      //  width: 100%;
      //  height: 100%;
      //}
    }
  }
}
</style>
